<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{message.name}}
        <!-- <aaa @getdata="fun"></aaa> -->
        <!-- sync是一个修饰符 用来同步子组件向父组件传递的数据 -->
        <!-- getdata 自定义方法名称 -->
        <aaa :getdata.sync="message"></aaa>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const child = {
            data() {
                return {
                    // msg: '这是要传递给父组件的数据'
                    msg: {
                        name: '你是个麻瓜'
                    }
                }
            },
            template: `
                <button @click="sendData">传递数组给父组件</button>
            `,

            methods: {
                sendData() {
                    // this.$emit是一个事件映射 其实就是出发一个函数的方法 
                    // 第一个参数是要出发的方法的名称 第二个是要传递的参数
                    // this.msg = "你是个麻瓜"
                    this.$emit('update:getdata', this.msg)
                }
            }
        }
        // Vue注册全局组件的方法 第一个参数是要注册的组件名 第二个是要使用的组件模板
        // 所谓子组件向父组件传值 意思就是 让父组件能够使用子组件的数据
        Vue.component('aaa', child)

        // 父子组件生命周期关系 创建过程 先走父组件的 beforeCreate() => created() => beforeMounte() => 子组件的beforeCreate() => created() =>  
        // beforeMounte() => 子组件的mounted => 父组件的mounted
        new Vue({
            el: '#app',
            data: {
                message: '' // 父组件中声明一个数据来准备接受子组件的数据
            },
            created() {
                // $nextTick 当下一次dom更新或者打补丁完成后立即出发的一个函数
                // this.$nextTick(() => {
                //     this.msg = this.$children[0].msg
                // })
            },

            // mounted() {
            //     // console.log(this.$children[0].msg);
                
                
            // },

            // methods: {
            //     fun(data) {
            //         console.log(data);
            //         this.msg = data
            //     }
            // }
        })
    </script>
</body>
</html>